<template>
  <div>
    <button @click="comName = 'QrCode'">二维码登录</button>
    <button @click="comName = 'UserLogin'">账号密码登录</button>
    <button @click="comName = 'PhoneCode'">手机验证码登录</button>
    <!-- 这个区域的组件没有写死 -->
    <!-- 根据is属性来决定显示哪个组件 -->
    <!-- is属性对应的是comName，comName如果是QrCode，就代表显示QrCode这个组件 -->
    <!-- 其实component的内部用的也是v-if -->

    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>

    <!-- <qr-code v-if="comName === 'QrCode'"/>
     <user-login v-else-if="comName === 'UserLogin'"/>
     <phone-code v-else-if="comName === 'PhoneCode'"/> -->
  </div>
</template>

<script>
import QrCode from './components/QrCode.vue'
import UserLogin from './components/UserLogin.vue'
import PhoneCode from './components/PhoneCode.vue'
export default {
  components: {
    QrCode,
    UserLogin,
    PhoneCode
  },

  data () {
    return {
      comName: 'UserLogin'
    }
  }
}
</script>

<style></style>
